<template>
  <view class="root">
    <view class="addSuccess">添加成功</view>
    <view class="device-title">设备命名，点击设备填写设备名称后点击完成</view>
    <view class="device-info">
      <uni-list>
        <uni-list-item
          :title="equipmentName"
          :note="equipmentNo"
          showArrow
          thumb="https://mkservice.mk-iot.com/subFile/mk2240/device.png"
          thumb-size="lg"
          @tap="openInput"
        />
      </uni-list>
      <view
        class="btnComplete"
        style="margin-top: 50rpx"
      >
        <button
          type="primary"
          @tap="clickAdd"
          style=""
        >
          完成
        </button>
      </view>
    </view>
    <uni-popup
      ref="inputDialog"
      type="dialog"
    >
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        title="输入设备名称"
        placeholder="请输入设备名称"
        @confirm="dialogInputConfirm"
      >
        <view>
          <uni-easyinput
            type="text"
            v-model="equipmentName"
            :placeholder="placeholder"
          />
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import { addEquipment } from '../../api/system/equiment/equipment'
  export default {
    data() {
      return {
        equipmentName: null,
        storeId: null,
        equipmentNo: null,
        equipmentTypeId: null,
        deviceName: null,
      }
    },
    onLoad(option) {
      this.storeId = option.storeId
      this.equipmentNo = option.equipmentNo
      this.equipmentTypeId = option.equipmentTypeId
    },
    methods: {
      //点击确定绑定绑定,设备到用户名下
      clickAdd() {
        if (this.equipmentName == null) {
          this.$modal.msgError('请填写设备名称')
        } else {
          const data = {
            equipmentNo: this.equipmentNo,
            equipmentName: this.equipmentName,
            equipmentTypeId: this.equipmentTypeId,
            storeId: this.storeId,
            online: 1,
          }
          addEquipment(data).then((res) => {
            if (res.code == 200) {
              uni.reLaunch({
                url: '/devicelistpkg/index/index',
                success: (res) => {
                  if ((res.errMsg = 'reLaunch:ok')) {
                    this.$modal.msgSuccess('设备绑定成功')
                  }
                },
              })
            } else {
              this.$modal.msgError('设备绑定失败')
            }
          })
        }
      },
      //点击弹出输入框
      openInput() {
        this.$refs.inputDialog.open()
      },
      //点击确定后
      dialogInputConfirm(val) {
        if (val != null && val != '') {
          this.equipmentName = val
          // 关闭窗口后，恢复默认内容
          this.$refs.inputDialog.close()
        }
      },
    },
  }
</script>

<style>
  .root {
    padding: 16px 16px;
  }

  page {
    background-color: #f6f6f6;
  }

  .addSuccess {
    font-size: 34rpx;
    font-weight: bold;
    margin-top: 60rpx;
  }

  .device-title {
    font-size: 24rpx;
    color: gray;
    margin-top: 10rpx;
  }

  .btnComplete button {
    width: 60%;
    height: 80rpx;
    line-height: 80rpx;
  }

  .device-info {
    margin-top: 40rpx;
  }
</style>
